<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账单首页</title>

    <div th:replace="head"></div>
    <link rel="stylesheet" href="/static/css/dataTables.bootstrap.css"/>
</head>

<script th:src="@{/static/js/jquery.min.js}"></script>
<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">
    <div>
        <label th:if="${userForAuth} == null">
            <label onclick="to()">请登录</label>&nbsp;&nbsp;&nbsp;&nbsp;
            请输入用户ID:<input type="text" id="userId" th:name="userId"/>
            <button id="search" class="btn btn-info" onclick="search()">查询</button>
            请输入用户token:<input type="text" id="token" th:name="token"/>
            <button id="search2" class="btn btn-info" onclick="search2()">查询</button>
        </label>
        <h3 th:if="${userForAuth} != null">
            欢迎&ensp;
            <label th:if="${userForAuth} != null" th:text="${userForAuth.getUserName()}"></label>
            &ensp;进入账单<a th:href="@{/bill/to/index}">首页</a> &ensp;&ensp;&ensp;&ensp;

            <button th:if="${token == null}" id="detail"  onclick="detail()" class="btn btn-info">查询消费统计</button>
            
            <button th:if="${token != null}" th:onclick="detail2([[${token}]])"
                    class="btn btn-info">查询消费统计</button>

            <button th:if="${token == null}" id="index"  onclick="view()" class="btn btn-info">查询消费明细</button>

            <button th:if="${token == null}" id="month"  onclick="monthBillView()" class="btn btn-info">查询月账单明细</button>

            <a th:if="${token == null}" th:href="@{/bill/to/add}" style="font-size:26px;float: right;">添加记录</a>
        </h3>
    </div>
    <div th:if="${userForAuth} != null">
        <div class="content-wrapper">


            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">

                        <div class="box">
                            <div class="box-body">
                                <table id="dataTable" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">记录ID</th>
                                        <th style="text-align: center">日期</th>
                                        <th style="text-align: center">方式</th>
                                        <th style="text-align: center">类型</th>
                                        <th style="text-align: center">金额</th>
                                        <th style="text-align: center">支付时间</th>
                                        <th style="text-align: center">来源</th>
                                        <th style="text-align: center">去向</th>
                                        <th style="text-align: center">备注</th>
                                        <th th:if="${token == null}" style="text-align: center">edit</th>
                                        <th th:if="${token == null}" style="text-align: center">delete</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="bill : ${queryBill.getResults()}">
                                        <td style="text-align: center" th:text="${bill.recordId}"></td>
                                        <td style="text-align: center" th:text="${bill.date}">label</td>
                                        <td style="text-align: center" th:text="${bill.modeName}">label</td>
                                        <td style="text-align: center" th:text="${bill.typeName}">label</td>
                                        <td th:if="${bill.modeName} == '支出'" style="text-align: center;color: #FF0000" th:text="'-'+${bill.money}">

                                        </td>
                                        <td th:if="${bill.modeName} == '收入' and ${bill.type} != 25" style="text-align: center;color: 
                                        #90EE90" 
                                            th:text="'+'+${bill.money}">

                                        </td>
                                        <td th:if="${bill.modeName} == '收入' and ${bill.type} == 25" style="text-align: center;color: 
                                        #90EE90"
                                            th:text="'**'">

                                        </td>
                                        <td th:if="${bill.modeName} == '转账'" style="text-align: center;color: #008CBA"
                                            th:text="${bill.money}">

                                        </td>
                                        <!--<td style="text-align: center" th:text="${bill.money}">label</td>-->
                                        <td style="text-align: center" th:text="${#dates.format(bill.payTime,'yyyy-MM-dd HH:mm:ss')}">url</td>
                                        <td style="text-align: center" th:text="${bill.formName}">
                                            <!-- <span name="lock" title="切换状态"
                                                   th:data="@{/user/{id}/status(disable=${!item.disabled},id=${item.id})}"
                                                   style="cursor: pointer" class="glyphicon glyphicon-lock"></span>-->

                                        </td>
                                        <td style="text-align: center" th:text="${bill.to}">label</td>
                                        <td style="text-align: center" th:text="${bill.remark}">label</td>
                                        <td th:if="${token == null}" style="text-align: center">
                                            <!--<a th:href="@{/user/form(id=${bill.recordId})}"><span
                                                    class="glyphicon glyphicon-edit"
                                                    title="编辑">编辑</span></a>-->
                                            <button th:onclick="|queueEdit(${bill.recordId},${bill.type})|" class="btn btn-info" type="button">
                                                 编辑
                                            </button>
                                        </td>

                                        <td th:if="${token == null}" style="text-align: center">
                                            <button th:onclick="|queueDelete(${bill.recordId})|" class="btn btn-info" type="button">
                                                删除
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                </div>

            </section>
            <!-- /.content -->
        </div>

        <div class="modal-footer no-margin-top">
            <div th:if="${queryBill.getPaging().getTotalPages() != 0}">
                <ul th:if="${token == null}" class="pagination pull-right no-margin">

                    <!-- 处理页数小于等于7 的情况 -->
                    <ul th:if="${(queryBill.getPaging().getTotalPages() lt 7) && (queryBill.getPaging().getTotalPages() ge 0)}"
                        class="pagination pull-right no-margin">
                        <li th:each="pageNum:${#numbers.sequence(0, queryBill.getPaging().getTotalPages() - 1)}">
                            <a th:href="'/bill/to/index?currentPage=' + ${pageNum}"  th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index?currentPage=' + ${pageNum}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'"></a>
                        </li>
                    </ul>

                    <!-- 处理页数大于7 的情况 -->
                    <ul th:if="${(queryBill.getPaging().getTotalPages() ge 7)}" class="pagination pull-right no-margin">
                        <!-- 首页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() ne 0}" >
                            <a th:href="'/bill/to/index?currentPage=0'">首页</a>
                        </li>
                        
                        <!-- 上一页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() gt 0}">
                            <a th:href="'/bill/to/index?currentPage=' + ${queryBill.getPaging().getCurrentPage()-1}">上一页</a>
                        </li>

                        <!-- 当前页面小于等于4 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() le 4}"
                            th:each="pageNum:${#numbers.sequence(0,4)}">
                            <a th:href="'/bill/to/index?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                                
                            </a>
                            <a th:href="'/bill/to/index?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'">
                                
                            </a>
                        </li>
                        <li th:if="${queryBill.getPaging().getCurrentPage() le 4}">
                            <a th:href="'/bill/to/index?currentPage=5'">...</a>
                        </li>

                        <!-- 最后一页与当前页面之差小于等于3 -->
                        <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}">
                            <a th:href="'/bill/to/index?currentPage=' + ${queryBill.getPaging().getTotalPages() -5}">...</a>
                        </li>
                        <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}"
                            th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getTotalPages()-4,
                            queryBill.getPaging().getTotalPages()-1)}">
                            <a th:href="'/bill/to/index?currentPage='+ ${pageNum}" th:text="${pageNum + 1 }"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'">
                            </a>
                        </li>


                        <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
                        <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                            <a th:href="'/bill/to/index?currentPage=' + ${queryBill.getPaging().getCurrentPage() -2}">...</a>
                        </li>
                        <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}"
                            th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getCurrentPage()-1,
                                queryBill.getPaging().getCurrentPage()+1)}">
                            <a th:href="'/bill/to/index?currentPage=' + ${pageNum}" th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index?currentPage=' + ${pageNum}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'">
                            </a>
                        </li>
                        <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                        (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                            <a  th:href="'/bill/to/index?currentPage=' +${queryBill.getPaging().getCurrentPage() + 2}">...</a>
                        </li>

                        <!-- 下一页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() lt queryBill.getPaging().getTotalPages() - 1}">
                            <a th:href="'/bill/to/index?currentPage=' + ${queryBill.getPaging().getCurrentPage() + 1}">下一页</a>
                        </li>
                        
                        <!-- 尾页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() ne queryBill.getPaging().getTotalPages()-1}">
                            <a th:href="'/bill/to/index?currentPage=' + ${queryBill.getPaging().getTotalPages()-1}" >尾页</a>
                        </li>

                        
                </ul>
                </ul>

                <ul th:if="${token != null}" class="pagination pull-right no-margin">

                    <!-- 处理页数小于等于7 的情况 -->
                    <ul th:if="${(queryBill.getPaging().getTotalPages() lt 7) && (queryBill.getPaging().getTotalPages() ge 0)}"
                        class="pagination pull-right no-margin">
                        <li th:each="pageNum:${#numbers.sequence(0, queryBill.getPaging().getTotalPages() - 1)}">
                            <a th:href="'/bill/to/index?currentPage=' + ${pageNum} +'&token=' +${token}"  th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index?currentPage=' + ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'"></a>
                        </li>
                    </ul>

                    <!-- 处理页数大于7 的情况 -->
                    <ul th:if="${(queryBill.getPaging().getTotalPages() ge 7)}" class="pagination pull-right no-margin">
                        
                        <!-- 首页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() ne 0}" >
                            <a th:href="'/bill/to/index2?currentPage=0&token='+ ${token}">首页</a>
                        </li>

                        <!-- 上一页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() gt 0}">
                            <a th:href="'/bill/to/index2?currentPage=' + ${queryBill.getPaging().getCurrentPage()-1} + '&token='+ ${token}">上一页</a>
                        </li>
    
                        <!-- 当前页面小于等于4 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() le 4}"
                            th:each="pageNum:${#numbers.sequence(0,4)}">
                            <a th:href="'/bill/to/index2?currentPage='+ ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index2?currentPage='+ ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'">
                            </a>
                        </li>
                        <li th:if="${queryBill.getPaging().getCurrentPage() le 4}">
                            <a th:href="'/bill/to/index2?currentPage=5' +'&token=' +${token}">...</a>
                        </li>
    
    
                        <!-- 最后一页与当前页面之差小于等于3 -->
                        <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}">
                            <a th:href="'/bill/to/index2?currentPage=' + ${queryBill.getPaging().getTotalPages() -5} +'&token=' +${token}">...</a>
                        </li>
                        <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}"
                            th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getTotalPages()-4,
                                queryBill.getPaging().getTotalPages()-1)}">
                            <a th:href="'/bill/to/index2?currentPage='+ ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index2?currentPage='+ ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'">
                            </a>
                        </li>
    
                        <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
                        <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                                (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                            <a th:href="'/bill/to/index2?currentPage=' + ${queryBill.getPaging().getCurrentPage() -2} +'&token=' +${token}">...</a>
                        </li>
                        <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                                (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}"
                            th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getCurrentPage()-1,
                                    queryBill.getPaging().getCurrentPage()+1)}">
                            <a th:href="'/bill/to/index2?currentPage=' + ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                            </a>
                            <a th:href="'/bill/to/index2?currentPage=' + ${pageNum} +'&token=' +${token}" th:text="${pageNum + 1}"
                               th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                               th:style="'font-weight:bold;background: #6faed9;'">
                            </a>
                        </li>
                        <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                            <a  th:href="'/bill/to/index2?currentPage=' +${queryBill.getPaging().getCurrentPage() + 2} +'&token=' +${token}">...</a>
                        </li>

                        <!-- 下一页-->
                        <li th:if="${queryBill.getPaging().getCurrentPage() lt queryBill.getPaging().getTotalPages() - 1}">
                            <a th:href="'/bill/to/index2?currentPage=' + ${queryBill.getPaging().getCurrentPage() + 1} +'&token=' +${token}">下一页</a>
                        </li>
                        
                        <!-- 尾页 -->
                        <li th:if="${queryBill.getPaging().getCurrentPage() ne queryBill.getPaging().getTotalPages()-1}">
                            <a th:href="'/bill/to/index2?currentPage=' + ${queryBill.getPaging().getTotalPages()-1} +'&token=' +${token}" >尾页</a>
                        </li>
    
                       
                </ul>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function search(){
        var customerId = document.getElementById("userId").value;
        location.href = "/bill/to/view?customerId="+customerId;
    }
    function search2() {
        var token = document.getElementById("token").value;
        location.href = "/bill/to/index2?token="+token;
    }

    function view(){
        location.href="/bill/to/view";
    }
    
    function monthBillView() {
        location.href="/bill/to/statistics";
    }

    function detail(){
        location.href="/bill/to/detail";
    }
    function detail2(token){
        location.href="/bill/to/detail2?token="+token;
    }
    
    function queueEdit(recordId,type) {
        if (type == 25) {
            alert("该条记录不支持修改！！");
        } else {
            location.href = "/bill/to/update?recordId=" + recordId;
        }
    }

    function to() {
        window.open("http://106.15.233.80:9000/customer/to/login");
    }


    
    function queueDelete(id) {
        if (confirm("确定要删除吗?")==true){
            $.ajax({
                type:'post',
                url:"/bill/del/bill",
                data:{recordId:id},
                success:function (result) {
                    if(result.code ==0){
                        window.location.href="/bill/to/index";
                    }
                }
            });
        } else {
            return false;
        }

    }
</script>
</body>
</html>
